<template>
  <div class="problem">
    <div class="title">常见问题</div>
    <Collapse accordion>
      <collapse-item v-for="(item, index) in list" :key="index">
        <template slot="title">
          <div class="title-wrap">
            <div class="title">Q{{ index + 1 }}</div>
            <div class="_content">{{ item.title }}</div>
          </div>
        </template>
        <div
          class="content-wrap"
          v-html="item.content ? item.content.content : '内容完善中'"
        ></div>
      </collapse-item>
    </Collapse>
    <nodata message="该企业暂未入驻，请联系厂家或者平台" :status="listStatus"></nodata>
    <m-pagination
      :pagination="total"
      :page-size="limit"
      @changePage="changeThisPage"
    />
  </div>
</template>

<script>
import { Collapse, CollapseItem } from "element-ui";
import { questionsListMer } from "@/request/api";

export default {
  name: "Problem",
  components: { Collapse, CollapseItem },
  data() {
    return {
      id: "",
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 10,
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getList();
  },
  methods: {
    getList() {
      this.listStatus = 1;
      this.list = [];
      let data = {
        id: this.id,
        page: this.page,
      };
      questionsListMer(data)
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.count;
          if (this.total == 0) {
            this.listStatus = 0;
          } else {
            this.listStatus = 2;
          }
          window.scrollTo({ top: 0 });
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    changeThisPage(page) {
      this.page = page;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.problem {
  width: 1200px;
  padding: 25px;
  background-color: #fff;

  /deep/ .el-collapse-item__header {
    height: 72px;
    border: none;
    border-bottom: solid 1px #eaeaea;
    background-color: rgb(243, 244, 247);
    padding: 0 25px;
  }

  /deep/ .el-collapse-item__content {
    padding: 15px 25px;
  }

  > .title {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    margin-bottom: 50px;
  }

  .title-wrap {
    display: flex;
    align-items: center;

    .title {
      font-size: 22px;
      color: $theme-color-1;
      font-weight: bold;
      margin-right: 15px;
    }

    ._content {
      font-size: 16px;
      color: #666;
      font-weight: bold;
    }
  }

  .content-wrap {
    font-size: 16px;
    color: #666;
  }
}
</style>
